<template>
  <div class="container">
    <div class="tips-title">美化系统自带的 alert、confirm 和 prompt，适用于简单的内容。如果需要弹出较为复杂的内容，请使用 Dialog</div>
    <div class="tips-title">1. Alert</div>
    <el-button type="text" @click="openAlert">点击打开 Message Box</el-button>
    <div class="tips-title">2. Confirm</div>
    <el-button type="text" @click="openConfirm">点击打开 Message Box</el-button>
    <div class="tips-title">3. Prompt</div>
    <el-button type="text" @click="openPrompt">点击打开 Message Box</el-button>
    <div class="tips-title">4. Msgbox</div>
    <el-button type="text" @click="openMsgbox">点击打开 Message Box</el-button>
  </div>
</template>
<script>
  export default {
    name: 'no-messagebox',
    data() {
      return {

      }
    },
    methods:{
      openAlert() {
        this.$alert('这是一段内容', '标题名称', {
          confirmButtonText: '确定',
          callback: action => {
            this.$message({
              type: 'info',
              message: `action: ${ action }`
            });
          }
        });
      },
      openConfirm() {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      openPrompt() {
        this.$prompt('请输入邮箱', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
          inputErrorMessage: '邮箱格式不正确'
        }).then(({ value }) => {
          this.$message({
            type: 'success',
            message: '你的邮箱是: ' + value
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });
        });
      },
      openMsgbox() {
        const h = this.$createElement;
        this.$msgbox({
          title: '消息',
          message: h('p', null, [
            h('span', null, '内容可以是 '),
            h('i', { style: 'color: teal' }, 'VNode')
          ]),
          showCancelButton: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          beforeClose: (action, instance, done) => {
            if (action === 'confirm') {
              instance.confirmButtonLoading = true;
              instance.confirmButtonText = '执行中...';
              setTimeout(() => {
                done();
                setTimeout(() => {
                  instance.confirmButtonLoading = false;
                }, 300);
              }, 3000);
            } else {
              done();
            }
          }
        }).then(action => {
          this.$message({
            type: 'info',
            message: 'action: ' + action
          });
        });
      }
    }
  }
</script>
<style>
</style>

